<script setup>
  import Header from '@/common/Header.vue'
  import DataChart from '@/components/data-chart/index.vue'
  import Test from '@/components/test.vue'


  import { ref, reactive, computed, onMounted, watch, provide } from 'vue'

  import { Search } from '@element-plus/icons-vue'
  import { queryHs6, getFarmList } from '@/api/index.js'

//  ============== 变量 =============
const headerName = ref('Bigscreen title')
const headerStyle = reactive({
  color: '#f00',
  fontWeight: 500,
  fontSize: '24px'
})

const hsCode = ref('420221')

var chartData = reactive({
  unit: '美元',
  x: [],
  data1: {
    name: '进口',
    data: []
  },
  data2: {
    name: '出口',
    data: []
  }
})

var chartData2 = reactive({
  unit: '',
  data: []
})
var chartData3 = reactive({
  unit: '',
  x: [],
  y: []
})

provide('chartData2', chartData2)


//  ============== 计算属性 =============


// ============== watch ==============


// ============== onMounted ===============
onMounted(() => {
  getQueryHs6()
  initChartData()
})

function initChartData() {
  chartData2.unit = '只'
  chartData2.data = [
    { name: '牛', value: 12, unit: ' ' },
    { name: '羊', value: 22, unit: ' ' },
  ]

  chartData3.unit = '只'
  chartData3.x = ['牛', '羊', '禽', '马']
  chartData3.y = [12, 12, 18, 10]
}

async function getQueryHs6() {
  let params = { hs6: hsCode.value }
  let res = await queryHs6(params)
  try {
    // console.log('res : ', res);
    // dataList.value = res.data
    formatChartData(res.data[0])
    // debugger
  } catch (err) {
    console.log('err : ', err);
  }
}

function formatChartData(item) {
  chartData.x = []
  chartData.data1.data = []
  chartData.data2.data = []

  let IED = []
  let EED = []

  for(let i in item) {
    let ied_item = {}
    if (i.substring(0, 3) == 'IED' && i.substring(3) < 2024) {
      ied_item[i] = item[i]
      IED.push(ied_item)
    }

    let eed_item = {}
    if (i.substring(0, 3) == 'EED' && i.substring(3) < 2024) {
      eed_item[i] = item[i]
      EED.push(eed_item)
    }
  }

  for (let i in IED) {
    let value = Object.values(IED[i])[0]
    chartData.data1.data.push(value)
  }

  for (let i in EED) {
    let key = Object.keys(EED[i])[0]
    chartData.x.push(key.substring(3))

    let value = Object.values(EED[i])[0]
    chartData.data2.data.push(value)   
  }
}

async function getFarmData() {
  let res = await getFarmList()
  try {
    console.log('res : ', res);
    // debugger
  } catch (err) {
    console.log('err : ', err);
  }
}
</script>

<template>
  <div class="box body_bgi">
    <!-- header -->
    <div class="w_full h_100 lh_100">
      <Header 
        :headerName="headerName" 
        :headerStyle="headerStyle"
      >
      </Header>
    </div>
    
    <!-- body -->
    <div class="w_full h_full-100 p_20">
      <!-- 1 -->
      <div class="w_full h_40">
        <el-input
          v-model="hsCode"
          style="max-width: 300px"
          placeholder="请输入HS编码"
        >
          <template #append>
            <el-button :icon="Search" @click="getQueryHs6" />
          </template>
        </el-input>
      </div>

      <div class="w_full h_full-50 flex_row_around">
        <div class="w_30_p h_full">
          <DataChart 
            title="贸易数据"
            chartType="双柱图"
            :chartData="chartData"
          />
        </div>

        <div class="w_70_p h_full border_1_s_fff">
          <Test />
        </div>
      </div>
    </div>
  </div>
</template>
